<template>
	<view>
		<view class="cu-form-group" >
			<view  class="zh-picker" :style="{'justify-content':justifyContent}" @tap="showPicker">
				<view v-if="iconClass||label" class="title" :style="{'width':labelWidth,'text-align':labelAlign}">
					<text v-if="required" class="text-red " style="padding-right: 4rpx;" :style="{'font-size':fontSize}">*</text>
					<text v-if="iconClass" :class="iconClass?iconClass:''" style="padding-right: 6rpx;" :style="{'font-size':fontSize}"></text>
					<text v-if="label" :style="{'font-size':fontSize}">{{ label }}</text>
				</view>
				<view :style="{'font-size':fontSize,'text-align':inputAlign}" :class="selectText?'':'input-placeholder-class'">{{selectText?selectText:placeholder}}</view>
			</view>
			<text style="padding-left: 20rpx;" :style="{'font-size':fontSize}" :class="rightIconClass?rightIconClass:''" class="cuIcon-right" @click="showPicker"></text>
		</view>
		<w-picker
			:visible.sync="visible"
			:mode="mode"
			:options="options"
			:startYear="startYear" 
			:endYear="endYear"
			:value="value"
			:current="current"
			:fields="fields"
			:nullFlag="nullFlag"
			:defaultProps="defaultProps"
			@confirm="onConfirm($event)"
			@cancel="onCancel"
			@change="onChange($event)"
			:ref="'zh-picker-'+pickerRef" 
			:disabledAfter="disabledAfter"
			:defaultType="defaultType"
			:themeColor="themeColor"
			:hideArea="hideArea"
			:level="level"
			:timeout="timeout"
			:expand="expand"
			:pickerRef="pickerRef"
		></w-picker>
		
	</view>
</template>

<script>
	export default {
		name: 'zh-picker',
		props:{
			iconClass: {
				type:[Array, String],
				default(){
					return ''
				}
			},
			rightIconClass: {
				type:[Array, String],
				default(){
					return ''
				}
			},
			required: Boolean,
			nullFlag:{
				type:Boolean,
				default:true
			},
			label:String,
			fontSize: {
				type: String,
				default: '28rpx'
			},
			// 左边标题的宽度单位rpx
			labelWidth: {
				type: [Number, String],
				default: 'auto'
			},
			// 标题对齐方式，left|center|right
			labelAlign: {
				type: String,
				default: 'right'
			},
			// 输入框对齐方式
			inputAlign: {
				type: String,
				default: 'left'
			},
			justifyContent:{
				type:String,
				default:"flex-start"
			},
			mode:{
				type:String,
				default:"date"
			},
			disabled: {
				type: Boolean,
				default: false
			},
			placeholder:{
				type:String,
				default:"==请选择=="
			},
			value:{//默认值
				type:[String,Array,Number],
				default:""
			},
			current:{//是否默认显示当前时间，如果是，传的默认值将失效
				type:Boolean,
				default:false
			},
			themeColor:{//确认按钮主题颜色
				type:String,
				default:"#0081ff"
			},
			fields:{//日期颗粒度:year、month、day、hour、minute、second
				type:String,
				default:"date"
			},
			disabledAfter:{//是否禁用当前之后的日期
				type:Boolean,
				default:false
			},
			second:{//time-picker是否显示秒
				type:Boolean,
				default:true
			},
			options:{//selector,region数据源
				type:[Array,Object],
				default(){
					return []
				}
			},
			defaultProps:{//selector,linkagle字段转换配置
				type:Object,
				default(){
					return{
						label:"dictValue",
						value:"dictKey",
						children:"children"
					}
				}
			},
			defaultType:{
				type:String,
				default:"dictKey"
			},
			hideArea:{//mode=region时，是否隐藏区县列
				type:Boolean,
				default:false
			},
			level:{
				//多级联动层级，表示几级联动,区间2-4;
				type:[Number,String],
				default:2
			},
			timeout:{//是否开启点击延迟,当快速滚动 还没有滚动完毕点击关闭时得到的值是不准确的
				type:Boolean,
				default:true
			},
			expand:{//mode=shortterm 默认往后拓展天数
				type:[Number,String],
				default:30
			},
			startYear:{
				type:[String,Number],
				default:1970
			},
			endYear:{
				type:[String,Number],
				default:new Date().getFullYear()
			},
			pickerRef:{
				type:String,
				default:"default"
			},
		},
		data() {
			return {
				selectText:'',
				visible: false
			}
		},
		methods: {
			showPicker(){
				if(!this.disabled){
					this.visible = true
				}
			},
			onConfirm(e) {
				this.selectText=e.result
				this.$emit('pickerChange', e);
			},
			onChange(e) {
				if(e.result){
					this.selectText=e.result
				}else{
					this.reset()
				}
				
				console.log(this.selectText)
			},
			onCancel(){
				this.$emit('pickerCancel');
			},
			reset(){
				this.selectText=''
			},
			updateValue(value){
				let ref='zh-picker-'+this.pickerRef
				this.$refs[ref].updateValue(value)
				console.log("12345678")
			}
		},
		computed: {
			
		}
		
	}
</script>

<style lang="scss">
	.input-placeholder-class {
		color: $uni-text-color-placeholder;
	}
</style>